<template>
    <div>
        <Navigation />
        <HomePages />
        <Banner />
        <div class="cate">
            <div class="commonwidth">
                <div class="sub-list">
                    <h3>全部分类</h3>
                    <ul>
                        <li v-for="item, index in list.children" :key="index" @click="setsub(item)">
                            <img :src="item.picture" alt="">
                            <p>{{ item.name }}</p>

                        </li>
                    </ul>
                </div>
                <div class="ref-goods" v-for="item, index in list.children" :key="index">
                    <div class="head">
                        <h3>{{ item.name }}</h3>
                        <p class="tag">温暖柔软，品质之选</p>

                    </div>
                    <div class="body">
                        <div class="item" v-for="i, index in item.goods" :key="index" @click="category(i.id)">
                            <img :src="i.picture" alt="">
                            <p class="name">{{ i.name }}</p>
                            <p class="desc">{{ i.desc }}</p>
                            <p class="price">{{ i.price }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <Footer />
        <router-view></router-view>
    </div>
</template>
<script>

import Navigation from '@/components/Navigation.vue'
import HomePages from '@/components/HomePages.vue'
import Banner from '@/views/home/Banner.vue'
import Footer from '@/components/app.footer.vue'
import axios from 'axios'
// import { log } from 'console'
export default {
    data() {
        return {
            list: []//分类
        }
    },
    components: {
        Navigation: Navigation,
        HomePages: HomePages,
        Banner: Banner,
        Footer: Footer

    },
    mounted() {
        axios
            .get('http://pcapi-xiaotuxian-front-devtest.itheima.net/category?id=' + this.$route.query.id)
            .then((res) => {
                // console.log(res);
                if (res.data.msg == '操作成功') {
                    this.list = res.data.result
                    // console.log(this.list);
                }
            }
            )

    },
    methods: {
        category(id) {
            // console.log('in');
            this.$router.push({ name: '/product',query:{id:id} })

        },
        setsub(item){
            console.log(item);
            this.$router.push({name:'/sub',query:{id:item.id}})
        }
    }
}
</script>
<style scoped>
.cate {
    width: 100%;
    height: 100%;
    background: #f5f5f5;
}

.sub-list {
    margin-top: 20px;
    background-color: #fff;
}

.sub-list h3 {
    font-size: 28px;
    color: #666;
    font-weight: 400;
    text-align: center;
    line-height: 100px;
    width: 100%;
    height: 100px;
}

.commonwidth {
    /* 版心 */
    width: 1240px !important;
    margin-left: auto;
    margin-right: auto;
}

.sub-list ul {
    display: flex;
    padding: 0 32px;
    flex-wrap: wrap;
    min-height: 160px;
}

.sub-list li {
    width: 168px;
    height: 160px;
}

.sub-list li img {
    width: 100px;
    height: 100px;
}

.sub-list li p {
    line-height: 40px;
    margin-left: 17px;
}

.ref-goods {
    height: 457.4px;
    background: #fff;
    margin-top: 20px;
}

.head {
    height: 128px;
}

.head h3 {
    font-size: 28px;
    color: #666;
    font-weight: 400;
    text-align: center;
    line-height: 100px;
}

.tag {
    text-align: center;
    color: #999;
    font-size: 20px;
    position: relative;
    top: -20px;
}

.body {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 0 65px 30px;
}

.item {
    display: block;
    width: 220px;
    padding: 20px 30px;
    text-align: center;
    transition: all .5s;

    height: 299.4px;
}

.item img {
    width: 160px;
    height: 160px;
}

.item .name {
    font-size: 16px;
    padding-top: 10px;
    text-overflow: ellipsis;
    /* 溢出显示省略号 */
    overflow: hidden;
    /* 溢出隐藏 */
    white-space: nowrap;
    /* 强制不换行 */
}

.desc {
    color: #999;
    height: 29px;
    padding-top: 10px;
    text-overflow: ellipsis;
    /* 溢出显示省略号 */
    overflow: hidden;
    /* 溢出隐藏 */
    white-space: nowrap;
    /* 强制不换行 */
}

.price {
    color: #cf4444;
    font-size: 20px;
    padding-top: 10px;
}</style>